<template>
  <div>
     <h1>商品列表</h1>
     <div class="pro_list">
      <div class="pro_one" v-for="item in goodsList" :key="item.id">
        <img :src="item.pic" alt="">
        <p>{{item.name}}</p>
        <p>￥{{item.minPrice}} </p>
      </div>
     </div>
     <div>
      <div style="text-align: center;">
          <button @click="loadMove" style="font-size: 30px;">加载更多......</button>
      </div>
     </div>
  </div>
</template>
<script>
export default {
   name:"Cart",
   data(){
    return {
      goodsList:[],//商品列表
      page:1,//当前页码
      pageSize:6,//每页显示条数
      loadFinsh:false//是否没数据了
    }
   },
   created(){
       this.getList()// 调用methods方法
   },
   methods:{ 
     getList(){ //获取商品列表方法
         this.$axios({
          url:"https://api.it120.cc/ljf/shop/goods/list",
          method:"get",
          params:{
            page:this.page,//传当前页码给后台
            pageSize:this.pageSize //每页条数
          }
         }).then(res=>{
          console.log(res,"商品列表------")
          if(res.data.code==700){ //当后台返回700 无数据
            this.loadFinsh=true;//没有数据了
          }else{
            this.goodsList=[...this.goodsList,...res.data.data]; //存储后台返回的数据和上一次的数据拼在一起
          }
       
         })
     },
     loadMove(){ //点击加载更多
        if(this.loadFinsh){
          alert("没有更多数据了")
        }else{
            this.page++; //让页码加1
          this.getList();//重新调用获取列表接口
        }
       
     }
   }
}
</script>
<style lang="scss">
    .pro_list{
      width: 800px;
      display: flex;
      flex-wrap:wrap;
         justify-content: space-around;
      .pro_one{
        width: 350px;
        height: 350px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        border: 1px solid black;
        margin-top: 5px;
        img{
          width: 350px;
          height: 220px;
        }
        p:nth-child(2){
          font-size: 20px;
        }
        p:nth-child(3){
            font-size: 20px;
            color:red;
        }
      }
    }
</style>